﻿<!DOCTYPE html>
<html lang="zh-cn">
 <head> 
  <meta charset="utf-8" /> 
  <meta name="author" content="EXP: www.exp-blog.com" /> 
  <link rel="shortcut icon" href="https://exp-blog.com/favicon.png" /> 
  <title>眈眈探求 | 汉字转拼音</title> 
  <meta name="description" content="本页面需要加载1M的词库文件，所以不太适合web环境，且由于没有使用分词所以效果也不一定非常好。非要识别多音字的话，推荐在服务端完成（借助一些分词工具效果会更好，比如 https://github.com/fxsjy/jieba），然后做成接口给前端调用" /> 
  <link rel="stylesheet" type="text/css" href="css/simple-input-method.css" /> 
  <link rel="stylesheet" type="text/css" href="css/pinyin.css" /> 
 </head> 
 <body> 
  <div class="container"> 
   <h2>汉字转拼音（带词库、可以识别多音字）</h2> 
   <p>说明：本页面需要加载1M的词库文件，且由于没有使用分词所以效果也不一定非常好</p> 
   <div class="loading-tip">
    正在加载词库，文件比较大，请耐心等待加载完毕再尝试。
   </div> 
   <hr /> 
   <div> 
    <h3><b>输出类型：</b></h3> 
    <label><input type="radio" name="pinyin_type" value="0" checked="" />带声调拼音</label> 
    <label><input type="radio" name="pinyin_type" value="1" />不带声调拼音</label> 
    <label><input type="radio" name="pinyin_type" value="2" />拼音首字母</label> 
   </div> 
   <input type="text" id="test" value="小明说长大后要去看长城！" placeholder="请随便输入一些中文" /> 
   <br /> 
   <h3>转换结果：</h3> 
   <div id="result"></div> 
  </div> 
  <script type="text/javascript" src="dict/pinyin_dict_withtone.js"></script> 
  <script type="text/javascript" src="dict/pinyin_dict_polyphone.js"></script> 
  <script type="text/javascript" src="js/pinyinUtil.js"></script> 
  <script type="text/javascript">
		function getPinyin()
		{
			var value = document.getElementById('test').value;
			var type = document.querySelector('[name="pinyin_type"]:checked').value;
			var result = '';
			if(value)
			{
				switch(type)
				{
					case '0': result = pinyinUtil.getPinyin(value, ' ', true, true); break;
					case '1': result = pinyinUtil.getPinyin(value, ' ', false, true); break;
					case '2': result = pinyinUtil.getFirstLetter(value, true); break;
					default: break;
				}
			}
			var html = result;
			if(result instanceof Array)
			{
				html = '<ol style="list-style:none;">';
				result.forEach(function(val)
				{
					html += '<li>'+val+'</li>';
				});
				html += '</ol>';
			}
			document.getElementById('result').innerHTML = html;
		}
		document.getElementById('test').addEventListener('input', getPinyin);
		document.addEventListener('change', function(e)
		{
			if(e.target.name === 'pinyin_type')
			{
				getPinyin();
			}
		});
		getPinyin();
		document.querySelector('.loading-tip').innerHTML = 'JS加载完毕，现在你可以开始打字了！';
	</script>   
 </body>
</html>